<template>
	<view>
		<!-- 状态栏 -->
        <view class="tui-searchbox">
        	<view class="tui-search-input" @tap="toSearch">
        		<!-- #ifdef APP-PLUS || MP -->
        		<icon type="search" :size='13' color='#333'></icon>
        		<!-- #endif -->
        		<!-- #ifdef H5 -->
        		<view><tui-icon name="search" :size='16' color='#333'></tui-icon></view>
        		<!-- #endif -->
        		<input confirm-type="search" placeholder="大家都在搜：2019退役球星" :focus="true" auto-focus placeholder-class="tui-input-plholder"
        		 class="tui-input" v-model.trim="hotname" />
        		<!-- #ifdef APP-PLUS || MP -->
        		<icon type="clear" :size='13' color='#bcbcbc' @tap="cleanKey" v-show="key"></icon>
        		<!-- #endif -->
        		<!-- #ifdef H5 -->
        		<view @tap="cleanKey" v-show="key"><tui-icon name="close-fill" :size='16' color='#bcbcbc'></tui-icon></view>
        		<!-- #endif -->
        	</view>
        	<view class="tui-cancle" @tap="back">取消</view>
        </view>
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="reserve" active-color="#FFFFFF"></uni-segmented-control>
		<view v-show="current == current" v-if="listdata">
			<scroll-view scroll-y="true" class="page_scroll">
				<view class="scroll-item" v-for="(ite, ind) in listdata" :key="ind" @tap="gogoodsdetailds(ite.appoint_id)">
					<view class="scroll-item-image-box">
						<image :src="ite.list_pic" mode="aspectFill" class="scroll-item-image"></image>
					</view>
					<view class="scroll-item-text-box">
						<view class="flex-between">
							<view class="title">{{ite.appoint_name}}&nbsp;{{ite.appoint_content}}</view>
							<view class="tips" v-if="ite.appoint_type == 0">到店服务</view>
							<view class="tips" v-if="ite.appoint_type == 1">上门服务</view>
						</view>
						<view class="flex-start">
							<view class="title1">已预约{{ite.appoint_sum}}</view>
							<view class="flex-start" style="border: 2rpx solid #F04517;">
								<view class="text">评分</view>
								<view class="text1">{{ite.score_mean}}</view>
							</view>
							<view class="title2">态度好</view>
						</view>
						<view class="flex-start">
							<view class="title3">￥{{ite.appoint_price}}</view>
							<view class="tips1" v-if="ite.payment_status == 0">一口价</view>
							<view class="tips1" v-if="ite.payment_status == 1">预付金</view>
						</view>
						<view class="cell"></view>
						<view class="">
							{{ite.merchant_name}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="show-box" v-if="!listdata">
			<image src="../../../static/images/no_data.png" mode="" class="show-img"></image>
			<view class="show-text">未搜索到相关内容</view>
		</view>
	</view>
</template>
<script>
	//高德SDK
	import tuiIcon from "../../../appComponent/uni/icon/icon.vue"
	import uniSegmentedControl from "../../../appComponent/uni/uni-segmented-control/uni-segmented-control.vue"
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	const getGoodslist = () => {
		common.post('Appoint_new&a=ajaxList', {
			keywords: _this.hotname,
			sort_id: _this.sort_id,
		}, data => {
			console.log("nnnnnnn", data)
			_this.listdata= data.appoint_list.list;
		});
	};
	const getfilterDropdown = () => {
		common.post('Appoint_new&a=screening_conditions', {
			type: "search",
			cat_url: _this.cat_url,
		}, data => {
			console.log("nnnnnnn", data)
			_this.items = data.sort_array.map(item=>{
				return item.sort_value
			});
			console.log("mmmmmmmmmm",_this.items)
			_this.sort_id = data.sort_array[_this.current].sort_id;
			getGoodslist();
			_this.$forceUpdate();
			_this.listvalue = data.sort_array.map(item=>{
				return item.sort_id
			});
		});
	};
	export default {
		components:{
			uniSegmentedControl,
			tuiIcon
		},
		data() {
			return {
				tabs:[],
				sort_id:'',
				listvalue:[],
				showCategoryIndex:0,
				key: "",
				headerPosition:"fixed",
				city:"北京",
				showHeader:true,
				current: 0,
				items: [],
				hotname:'',
				listdata:{},
			}
		},
		onPageScroll(e){
			//兼容iOS端下拉时顶部漂移
			if(e.scrollTop>=0){
				this.headerPosition = "fixed";
			}else{
				this.headerPosition = "absolute";
			}
		},
		onLoad(options) {
			_this = this;
			_this.hotname = options.name;
			getfilterDropdown();
			// _this.amapPlugin = new amap.AMapWX({  
			// 	//高德地图KEY，随时失效，请务必替换为自己的KEY，参考：http://ask.dcloud.net.cn/article/35070
			// 	key: '7c235a9ac4e25e482614c6b8eac6fd8e'  
			// });
			// //定位地址
			// _this.amapPlugin.getRegeo({  
			// 	success: (data) => {
			// 		this.city = data[0].regeocodeData.addressComponent.city.replace(/市/g,'');//把"市"去掉
			// 	}  
			// }); 
		},
		methods: {
			//消息列表
			toMsg(){
				uni.navigateTo({
					url:'../../msg/msg'
				})
			},
			//分类切换显示
			showCategory(index){
				this.showCategoryIndex = index;
			},
			toCategory(e){
				uni.setStorageSync('catName',e.name);
				uni.navigateTo({
					url: '../../goods/goods-list/goods-list?cid='+e.id+'&name='+e.name
				});
			},
			//搜索跳转
			toSearch(){
				uni.navigateBack()
			},
			onClickItem(index) {
				_this.current = index;
				_this.sort_id = _this.listvalue[index];
				getGoodslist();
				_this.$forceUpdate();
			},
			//商品详情页
			gogoodsdetailds(appoint_id){
				uni.navigateTo({
					url:'/pages/appoint/goods/productDetail?appoint_id=' + appoint_id
				})
			},
		}
	}
</script>
<style lang="scss">
	page{
		background-color: rgb(245,245,245);
	}
	.tui-searchbox {
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
	}
	
	.tui-search-input {
		width: 100%;
		height: 66rpx;
		border-radius: 35rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background: #f2f2f2;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
	}
	
	.tui-input {
		flex: 1;
		color: #333;
		padding: 0 16rpx;
		font-size: 28rpx;
	}
	
	.tui-input-plholder {
		font-size: 28rpx;
		color: #b2b2b2;
	}
	
	.tui-cancle {
		color: #888;
		font-size: 28rpx;
		padding-left: 30rpx;
		flex-shrink: 0;
	}
	.place {
		background-color: #ffffff;
		height: 100upx;
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
	}
	.page_scroll{
		height: calc(100vh - 80rpx - 125rpx);
	}
	.scroll-items {
		display: flex;
		flex-direction: column;
		/* width: 100%; */
	}
	
	.scroll-item {
		margin-top: 15rpx;
		padding: 20rpx;
		background-color: white;
		border-radius: 8rpx;
		/* width: 100%; */
		/* align-items: center; */
		display: flex;
		flex-direction: row;
		border: 1px solid #f8f8f8;
	}
	
	.scroll-item-image-box {
		flex-grow: 0;
	}
	
	.scroll-item-text-box {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-size: 28rpx;
		/* font-weight: bold; */
		margin-left: 15rpx;
	}
	
	.scroll-item-image {
		border-radius: 4rpx;
		width: 180rpx;
		height: 180rpx;
		margin-top: 15rpx;
	}
	
	.select-box {
		display: flex;
		flex-direction: row;
		overflow: hidden;
	}
	
	.filter {
		position: absolute;
		right: 15rpx;
		line-height: 48px;
	}
	
	.popup-box {
		padding: 20rpx 15rpx;
	}
	
	.flex-between {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
	.title {
		font-size: 30rpx;
		font-weight: 700;
		line-height: 55rpx;
	}
	
	.tips {
		border: 2rpx solid #F04517;
		color: #F04517;
		font-size: 24rpx;
		line-break: 24rpx;
		padding: 0 5rpx;
	}
	
	.flex-start {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	
	.title1 {
		font-size: 26rpx;
		margin-right: 15rpx;
	}
	
	.text {
		color: #F04517;
		font-size: 20rpx;
		line-break: 24rpx;
		padding: 0 3rpx;
	}
	
	.text1 {
		color: #FFFFFF;
		background-color: #F04517;
		font-size: 20rpx;
		line-break: 24rpx;
		padding: 0 3rpx;
	}
	
	.title2 {
		color: #F04517;
		font-size: 24rpx;
		line-break: 24rpx;
		margin-left: 15rpx;
	}
	
	.title3 {
		font-size: 30rpx;
		font-weight: 700;
		color: red;
		margin-right: 15rpx;
	}
	
	.tips1 {
		background: red;
		color: #FFFFFF;
		font-size: 20rpx;
		line-break: 24rpx;
		padding: 0 5rpx;
	}
	
	.cell {
		width: 100%;
		height: 2rpx;
		background: #F1F1F1;
		margin: 5rpx 0;
	}
	
	.fixed-bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		padding: 0 15rpx;
		width: 96.5%;
		background: #F0AD4E;
	}
	.show-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100%;
	}
	.show-img {
		width: 416rpx;
		height: 312rpx;
		padding-top: 312rpx;
	}
</style>
